<!DOCTYPE html>
<html lang="en" data-label="html">
<head data-label="head">
  <meta data-label="meta" charset="utf-8" />
  <title data-label="title">What Is Focusable?</title>
  <style data-label="style">
    body :focus {
      outline: 2px solid hotpink;
    }

    .flexbox {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

    .flexbox > span {
      display: block;
    }

    .user-modify {
      -webkit-user-modify: read-write;
         -moz-user-modify: read-write;
          -ms-user-modify: read-write;
              user-modify: read-write;
    }

    .manual-continuation {
      border: 2px solid green;
    }
  </style>
</head>
<body onload="window.isLoaded=true;" data-label="body">
  <script>
    window.nestedDocuments = {};
    window.registerNestedDocument = function(namespace, _document) {
      if (!namespace) {
        window.console && console.warn('nested document without namespace', _document);
      }

      namespace = decodeURIComponent(namespace);
      window.nestedDocuments[namespace] = _document;

      // import "label namespace" from parent document
      namespace && [].forEach.call(_document.querySelectorAll('[data-label]'), function(element) {
        element.setAttribute('data-label', namespace + ' -> ' + element.getAttribute('data-label'));
      });
    };

    window.shadowRoots = {};
    window.registerShadowRoot = function(namespace, _document) {
      window.shadowRoots[namespace] = _document;
    };
  </script>

  <article id="top" data-label="ignore">
    <h1 data-label="h1">What Elements Are Focusable?</h1>
    <p data-label="p">This document is a testing ground to identify what a browser deems focusable and tabbable.</p>
    <p data-label="ignore">
      At first the document will add <code data-label="code">focus</code> event handlers to every descendant of <code>&lt;body&gt;</code>.
      <!-- FocusManagement: https://www.w3.org/TR/html5/editing.html#focus-management -->
      It will then try to <code>.focus()</code> every element to identify which elements satisfiy Focus Managemenet.
      After that you - the user - can hit <kbd data-label="kbd">TAB</kbd> a couple of times (like 250 or something) to determine the browser's natural tabbing order
    </p>

    <a href="#output-results" data-label="ignore">go to results</a>
    <input id="tabsequence-start" type="text" data-label="ignore" tabindex="1" value="start of tabbing sequence">
  </article>

  <article data-label="article{ios}">
    <h2 data-label="h2">iOS Form Element Navigation</h2>

    <!-- checking iOS tabindex ordering -->
    <input type="text" data-label="input[tabindex=2]" tabindex="2">
    <input type="text" data-label="input[tabindex=1]" tabindex="1">
  </article>

  <article data-label="article{input}">
    <h2 data-label="ignore">Form Control Elements</h2>

    <input type="text" id="label-target" data-label="input[type=text]">
    <input type="text" id="label-target-focusable" data-label="input[type=text][tabindex=-1]" tabindex="-1">
    <input type="password" data-label="input[type=password]">
    <input type="password" data-label="input[type=password][tabindex=-1]" tabindex="-1">
    <input type="checkbox" data-label="input[type=checkbox]">
    <input type="checkbox" data-label="input[type=checkbox][tabindex=-1]" tabindex="-1">
    <input type="radio" name="void-form-elements-1" data-label="input[type=radio]">
    <input type="radio" name="void-form-elements-1" data-label="input[type=radio][tabindex=-1]" tabindex="-1">
    <input type="submit" data-label="input[type=submit]">
    <input type="submit" data-label="input[type=submit][tabindex=-1]" tabindex="-1">
    <input type="reset" data-label="input[type=reset]">
    <input type="reset" data-label="input[type=reset][tabindex=-1]" tabindex="-1">
    <input type="hidden" data-label="input[type=hidden]">
    <input type="hidden" data-label="input[type=hidden][tabindex=-1]" tabindex="-1">
    <select data-label="select"><option data-label="option">option</option></select>
    <select data-label="select[tabindex=-1]" tabindex="-1"><option>option</option></select>
    <textarea rows="1" cols="10" data-label="textarea"></textarea>
    <textarea rows="1" cols="10" data-label="textarea[tabindex=-1]" tabindex="-1"></textarea>
    <button type="button" data-label="button[type=button]">button</button>
    <button type="button" data-label="button[type=button][tabindex=-1]" tabindex="-1">button</button>
  </article>

  <!-- https://www.w3.org/TR/html5/disabled-elements.html#concept-element-disabled -->
  <article data-label="article{disabled-input}">
    <h2 data-label="ignore">Disabled Form Control Elements</h2>

    <input disabled type="text" data-label="input[type=text][disabled]">
    <input disabled type="password" data-label="input[type=password][disabled]">
    <input disabled type="checkbox" data-label="input[type=checkbox][disabled]">
    <input disabled type="radio" name="void-disabled-form-elements-1" data-label="input[type=radio][disabled]">
    <input disabled type="submit" data-label="input[type=submit][disabled]">
    <input disabled type="reset" data-label="input[type=reset][disabled]">
    <input disabled type="hidden" data-label="input[type=hidden][disabled]">
    <select disabled data-label="select[disabled]"><option>option</option></select>
    <textarea disabled rows="1" cols="10" data-label="textarea[disabled]"></textarea>
    <button disabled type="button" data-label="button[type=button][disabled]">button</button>
  </article>

  <article data-label="article{label}">
    <h2 data-label="ignore">Label Element</h2>

    <label data-label="label">label</label>
    <label data-label="label[tabindex=-1]" tabindex="-1">label</label>
    <label data-label="label[tabindex=0]" tabindex="0">label</label>
    <label for="label-target" data-label="label[for=label-target]">label</label>
    <label for="label-target-focusable" data-label="label[for=label-target-focusable]">label</label>
    <label for="label-target" data-label="label[for=label-target][tabindex=-1]" tabindex="-1">label</label>
    <label data-label="label:has(input)"><input data-label="label:has(input) input"> label</label>
    <label disabled data-label="label[disabled]">label</label>
  </article>

  <article data-label="article{form}">
    <h2 data-label="ignore">Form Element</h2>

    <form data-label="form">
      <input data-label="form input">
    </form>
    <form data-label="form[tabindex=-1]" tabindex="-1">
      <input data-label="form[tabindex=-1] input">
    </form>
    <form data-label="form[tabindex=0]" tabindex="0">
      <input data-label="form[tabindex=0] input">
    </form>
    <form data-label="form[disabled]" disabled>
      <input data-label="form[disabled] input">
    </form>
    <form data-label="form[disabled][tabindex=-1]" tabindex="-1" disabled>
      <input data-label="form[disabled][tabindex=-1] input">
    </form>
    <form data-label="form[disabled][tabindex=0]" tabindex="0" disabled>
      <input data-label="form[disabled][tabindex=0] input">
    </form>
  </article>

  <article data-label="article{fieldset}">
    <h2 data-label="ignore">Fieldset Element</h2>

    <fieldset data-label="fieldset">
      <legend data-label="fieldset legend">legend</legend>
      <input type="text" data-label="fieldset input[tabindex=-1]" tabindex="-1">
      <input type="text" data-label="fieldset input">
    </fieldset>

    <fieldset data-label="ignore">
      <legend data-label="fieldset:has(input[tabindex=-1]) legend">legend</legend>
      <input type="text" data-label="fieldset:has(input[tabindex=-1]) input[tabindex=-1]" tabindex="-1">
    </fieldset>

    <a href="#void" data-label="fieldset{no-tabbable} a[tabindex=1]" tabindex="1">link</a>
    <a href="#void" data-label="fieldset{no-tabbable} a">link</a>

    <fieldset data-label="ignore">
      <legend data-label="fieldset:has(textarea) legend">legend</legend>
      <textarea rows="1" cols="10" data-label="fieldset:has(textarea) textarea"></textarea>
    </fieldset>

    <fieldset data-label="ignore">
      <legend data-label="fieldset:has(select) legend">legend</legend>
      <select data-label="fieldset:has(select) select"><option>option</option></select>
    </fieldset>

    <fieldset data-label="ignore">
      <legend data-label="fieldset:has(button) legend">legend</legend>
      <button type="button" data-label="fieldset:has(button) button">button</button>
    </fieldset>

    <fieldset data-label="ignore">
      <legend data-label="fieldset:has(a) legend">legend</legend>
      <a href="#void" data-label="fieldset:has(a) a">link</a>
    </fieldset>

    <fieldset data-label="fieldset:empty"></fieldset>

    <fieldset disabled data-label="fieldset[disabled]">
      <input type="text" data-label="fieldset[disabled] input">
    </fieldset>

    <fieldset disabled tabindex="0" data-label="fieldset[disabled][tabindex=0]">
      <input type="text" data-label="fieldset[disabled][tabindex=0] input">
    </fieldset>

    <fieldset disabled tabindex="-1" data-label="fieldset[disabled][tabindex=-1]">
      <input type="text" data-label="fieldset[disabled][tabindex=-1] input">
    </fieldset>
  </article>

  <article data-label="article{links}">
    <h2 data-label="ignore">Navigation Elements</h2>

    <a name="void-navigation-elements-1" data-label="a[name]">link</a>
    <a href="#void" data-label="a[href]">link</a>
    <a href="" data-label="a[href=]">link</a>
    <a href="#void" data-label="a[href][tabindex=-1]" tabindex="-1">link</a>

    <span href="#void" data-label="span[href]">span with href attribute (invalid html)</span>
  </article>

  <!-- https://html.spec.whatwg.org/multipage/microdata.html#microdata -->
  <article data-label="article{itemprop}" itemscope itemtype="https://schema.org/BlogPosting">
   <header>
    <h1 id="microdata-link" itemprop="headline">Microdata Link</h1>
    <p><time itemprop="datePublished" datetime="2013-08-29">today</time></p>
    <link itemprop="url" href="#void" data-label="link[itemprop][href]">
   </header>
  </article>

  <article data-label="article{image-maps}">
    <h2 data-label="ignore">Image Maps</h2>

    <map name="image-maps-0" data-label="map">
      <area href="#void" shape="rect" coords="63,19,144,45" data-label="img[usemap] area[href].upper" data-reference="img[usemap]">
      <area shape="rect" coords="63,50,144,60" data-label="img[usemap] area" data-reference="img[usemap]">
      <area href="#void" shape="rect" coords="63,59,144,85" data-label="img[usemap] area[href].lower" data-reference="img[usemap]">
    </map>
    <img usemap="#image-maps-0" src="../media/image-map.png" alt="two clickable areas" data-label="img[usemap]">

    <input data-label="ignore">

    <!--
      In Firefox multiple uses of same image map hides elements from tabbing sequence
      see https://bugzilla.mozilla.org/show_bug.cgi?id=1116126
    -->
    <map name="image-maps-1" data-label="img[usemap].duplicate map">
      <area href="#void" shape="rect" coords="63,19,144,45" data-label="img[usemap].duplicate area[href]" data-reference="img[usemap].duplicate.second">
    </map>
    <img usemap="#image-maps-1" src="../media/image-map.png" alt="two clickable areas" data-label="img[usemap].duplicate.first">
    <input data-label="firefox-bug-1116126">
    <img usemap="#image-maps-1" src="../media/image-map.png" alt="two clickable areas" data-label="img[usemap].duplicate.second">

    <input data-label="ignore">

    <img usemap="#void" src="../media/image-map.png" alt="two clickable areas" data-label="img[usemap=void]">
    <img src="../media/image-map.png" alt="no map associated" data-label="img">

    <map name="image-maps-focusable-1" data-label="ignore">
      <area tabindex="-1" href="#void" shape="rect" coords="63,19,144,45" data-label="area[href][tabindex=-1].upper" data-reference="img[usemap].focusable">
      <area tabindex="-1" shape="rect" coords="63,50,144,60" data-label="area[tabindex=-1]" data-reference="img[usemap].focusable">
      <area tabindex="-1" href="#void" shape="rect" coords="63,59,144,85" data-label="area[href][tabindex=-1].lower" data-reference="img[usemap].focusable">
    </map>

    <img usemap="#image-maps-focusable-1" src="../media/image-map.png" alt="two clickable areas" data-label="img[usemap].focusable">

    <map name="image-maps-focusable-2" data-label="ignore">
      <area href="#void" shape="rect" coords="63,19,144,45" data-label="img[tabindex=-1] area[href].upper" data-reference="img[usemap][tabindex=-1]">
      <area shape="rect" coords="63,50,144,60" data-label="img[tabindex=-1] area" data-reference="img[usemap][tabindex=-1]">
      <area href="#void" shape="rect" coords="63,59,144,85" data-label="img[tabindex=-1] area[href].lower" data-reference="img[usemap][tabindex=-1]">
    </map>

    <img tabindex="-1" usemap="#image-maps-focusable-2" src="../media/image-map.png" alt="two clickable areas" data-label="img[usemap][tabindex=-1]">

    <input data-label="ignore">

    <map name="image-maps-2" data-label="ignore">
      <area href="#void" shape="rect" coords="63,19,144,45" data-label="map.invalid-image area[href].upper" data-reference="img[usemap].invalid">
      <area shape="rect" coords="63,50,144,60" data-label="map.invalid-image area" data-reference="img[usemap].invalid">
      <area href="#void" shape="rect" coords="63,59,144,85" data-label="map.invalid-image area[href].lower" data-reference="img[usemap].invalid">
    </map>

    <img usemap="#image-maps-2" src="#void" alt="not a valid image" data-label="img[usemap].invalid">

    <!-- Firefox might get stuck on the previous element -->
    <input data-label="ignore" class="manual-continuation" value="click here if stuck">

  </article>

  <article data-label="article{ismap}">
    <h2 data-label="ignore">Image Maps With Coordinates</h2>

    <a href="#void" data-label="a:has([ismap])">
      <img ismap src="../media/image-map.png" alt="clickable anywhere" data-label="a > img[ismap]">
    </a>
    <a href="#void" data-label="a[tabindex=-1]:has([ismap])" tabindex="-1">
      <img ismap src="../media/image-map.png" alt="clickable anywhere" data-label="a[tabindex=-1] > img[ismap]">
    </a>
    <a href="#void" data-label="a:has([ismap][tabindex=-1])">
      <img ismap tabindex="-1" src="../media/image-map.png" alt="clickable anywhere" data-label="a > img[ismap][tabindex=-1]">
    </a>
  </article>

  <!-- https://www.w3.org/TR/html5/browsers.html#browsing-context-container -->
  <article data-label="article{browsing}">
    <h2 data-label="ignore">Browsing Contexts</h2>

    <iframe src="iframe.html#iframe" name="iframe-1" width="200" height="100" data-label="iframe"></iframe>

    <div tabindex="0" data-label="ignore"></div>

    <iframe src="iframe.html#iframe[tabindex=-1]" name="iframe-2" width="200" height="100" data-label="iframe[tabindex=-1]" tabindex="-1"></iframe>

    <div tabindex="0" data-label="ignore"></div>

    <iframe src="iframe-focusable.html#iframe{focusable}" name="iframe-3" width="200" height="100" data-label="iframe{focusable}"></iframe>

    <div tabindex="0" data-label="ignore"></div>

    <iframe src="iframe-focusable.html#iframe{focusable}[tabindex=-1]" name="iframe-4" width="200" height="100" data-label="iframe{focusable}[tabindex=-1]" tabindex="-1"></iframe>

    <div tabindex="0" data-label="ignore"></div>

    <iframe src="../media/test.svg#iframe[src=svg]" name="iframe-5" width="200" height="100" data-label="iframe[src=svg]"></iframe>

    <div tabindex="0" data-label="ignore"></div>

    <iframe src="../media/test.svg#iframe[src=svg][tabindex=-1]" name="iframe-6" width="200" height="100" data-label="iframe[src=svg][tabindex=-1]" tabindex="-1"></iframe>

    <div tabindex="0" data-label="ignore"></div>

    <iframe src="iframe-focusable.html#iframe{hidden}" name="iframe-7" width="200" height="100" data-label="iframe{hidden}" style="visibility:hidden;"></iframe>

    <div tabindex="0" data-label="ignore"></div>

    <iframe src="iframe-focusable.html#iframe{none}" name="iframe-8" width="200" height="100" data-label="iframe{none}" style="display:none;"></iframe>

    <div tabindex="0" data-label="ignore"></div>


  </article>

  <article data-label="article{shadow}">
    <h2 data-label="ignore">Shadow DOM</h2>

    <div id="shadow-host-1" data-label="shadow-host"></div>
    <div id="shadow-host-2" data-label="shadow-host[tabindex=-1]" tabindex="-1"></div>
    <div id="shadow-host-3" data-label="shadow-host[tabindex=0]" tabindex="0"></div>
    <div id="shadow-host-4" data-label="shadow-host{hidden}" style="visibility: hidden;"></div>
    <div id="shadow-host-4" data-label="shadow-host{none}" style="display: none;"></div>
    <script>
      (function() {
        function createShadowedContent(element) {
          var prefix = element.getAttribute('data-label');
          var outerRoot = element.createShadowRoot();
          outerRoot.innerHTML = [
            '<input type="text" tabindex="0" data-label="' + prefix + ' input[tabindex=0]">',
            '<div id="inner-host" data-label="' + prefix + ' inner-host"></div>',
            '<input type="text" tabindex="-1" data-label="' + prefix + ' input[tabindex=-1]">',
            '<input type="text" tabindex="2" data-label="' + prefix + ' input[tabindex=2]">',
          ].join('');

          var innerHost = outerRoot.getElementById('inner-host');
          var innerRoot = innerHost.createShadowRoot();
          innerRoot.innerHTML = [
            '<input type="text" tabindex="-1" data-label="' + prefix + ' inner-host input[tabindex=-1]">',
            '<input type="text" tabindex="0" data-label="' + prefix + ' inner-host input[tabindex=0]">',
            '<input type="text" tabindex="1" data-label="' + prefix + ' inner-host input[tabindex=1]">',
          ].join('');

          window.registerShadowRoot(prefix + ' inner-host', innerRoot);
          window.registerShadowRoot(prefix, outerRoot);
        }

        if (!document.body.createShadowRoot) {
          window.console && console.log('ShadowDOM is not supported');
          return;
        }

        createShadowedContent(document.getElementById('shadow-host-1'));
        createShadowedContent(document.getElementById('shadow-host-2'));
        createShadowedContent(document.getElementById('shadow-host-3'));
        createShadowedContent(document.getElementById('shadow-host-4'));
      })();
    </script>
  </article>

  <!--
    https://www.w3.org/TR/html5/dom.html#interactive-content
    https://blog.mediacru.sh/2013/12/23/The-right-way-to-encode-HTML5-video.html
  -->
  <article data-label="article{interactive}">
    <h2 data-label="ignore">Interactive Content</h2>

    <audio data-label="audio">
      <source data-label="source[mp3]" src="../media/test.mp3"></source>
      <source data-label="source[ogg]" src="../media/test.ogg"></source>
      <p>no &lt;audio&gt; support</p>
    </audio>

    <audio controls data-label="audio[controls]">
      <source src="../media/test.mp3"></source>
      <source src="../media/test.ogg"></source>
      <p>no &lt;audio&gt; support</p>
    </audio>

    <audio controls data-label="audio[controls][tabindex=-1]" tabindex="-1">
      <source src="../media/test.mp3"></source>
      <source src="../media/test.ogg"></source>
      <p>no &lt;audio&gt; support</p>
    </audio>

    <video poster="../media/test.poster.png" data-label="video">
      <source src="../media/test.mp4"></source>
      <source src="../media/test.webm"></source>
      <source src="../media/test.ogv"></source>
      <p>no &lt;video&gt; support</p>
    </video>

    <video poster="../media/test.poster.png" controls data-label="video[controls]">
      <source src="../media/test.mp4"></source>
      <source src="../media/test.webm"></source>
      <source src="../media/test.ogv"></source>
      <p>no &lt;video&gt; support</p>
    </video>

    <video poster="../media/test.poster.png" controls data-label="video[controls][tabindex=-1]" tabindex="-1">
      <source src="../media/test.mp4"></source>
      <source src="../media/test.webm"></source>
      <source src="../media/test.ogv"></source>
      <p>no &lt;video&gt; support</p>
    </video>

    <script>
      (function() {
        var edgeVersion = window.navigator.userAgent.match(/Edge\/([\d.]+)/);
        if (edgeVersion && +edgeVersion[1] >= 14) {
          // Microsoft Edge14+ shows a download prompt for mov files
          // and thereby breaks the testing script
          document.write('<' + '!-- begin[skip MOV in Edge14+]');
        }
      })();
    </script>

    <embed type="video/quicktime" src="../media/test.mov" width="640" height="480" data-label="embed">

    <div tabindex="0" data-label="ignore"></div>

    <embed type="video/quicktime" src="../media/test.mov" width="640" height="480" data-label="embed[tabindex=-1]" tabindex="-1">

    <!-- end[skip MOV in Edge14+] -->

    <div tabindex="0" data-label="ignore"></div>

    <embed type="video/mp4" src="../media/test.mp4" width="640" height="480" data-label="embed[type=mp4]">

    <div tabindex="0" data-label="ignore"></div>

    <embed type="video/mp4" src="../media/test.mp4" width="640" height="480" data-label="embed[type=mp4][tabindex=-1]" tabindex="-1">


    <div tabindex="0" data-label="ignore"></div>

    <embed type="video/ogv" src="../media/test.ogv" width="640" height="480" data-label="embed[type=ogv]">

    <div tabindex="0" data-label="ignore"></div>

    <embed type="video/ogv" src="../media/test.ogv" width="640" height="480" data-label="embed[type=ogv][tabindex=-1]" tabindex="-1">


    <div tabindex="0" data-label="ignore"></div>

    <embed type="image/svg+xml" src="../media/test.svg#embed[type=svg]" width="640" height="480" data-label="embed[type=svg]">

    <div tabindex="0" data-label="ignore"></div>

    <embed type="image/svg+xml" src="../media/test.svg#embed[type=svg][tabindex=-1]" width="640" height="480" data-label="embed[type=svg][tabindex=-1]" tabindex="-1">

    <div tabindex="0" data-label="ignore"></div>

    <embed type="image/svg+xml" src="../media/test.svg#embed[type=svg][tabindex=0]" width="640" height="480" data-label="embed[type=svg][tabindex=0]" tabindex="0">

    <div tabindex="0" data-label="ignore"></div>

    <keygen name="interactive-content-keygen" challenge="challenge string" keytype="RSA" keyparams="pqg-params" data-label="keygen">

    <div tabindex="0" data-label="ignore"></div>

    <keygen name="interactive-content-keygen" challenge="challenge string" keytype="RSA" keyparams="pqg-params" data-label="keygen[tabindex=-1]" tabindex="-1">
  </article>

  <article data-label="article{scrollable}">
    <h2 data-label="ignore">Scrollable Content</h2>

    <div data-label="div{scroll-container-horizontal}" style="width: 100px; height: 50px; overflow: auto;">
      <div data-label="div{scroll-body-horizontal}" style="width: 500px; height: 40px;">scrollable content</div>
    </div>
    <div data-label="div{scroll-container-horizontal-scroll-x}" style="width: 100px; height: 50px; overflow-x: scroll;">
      <div data-label="div{scroll-body-horizontal-scroll-x}" style="width: 500px; height: 40px;">scrollable content</div>
    </div>
    <div data-label="div{scroll-container-horizontal-scroll-y}" style="width: 100px; height: 50px; overflow-y: scroll;">
      <div data-label="div{scroll-body-horizontal-scroll-y}" style="width: 500px; height: 40px;">scrollable content</div>
    </div>
    <div data-label="div{scroll-container-vertical}" style="width: 300px; height: 100px; overflow: auto;">
      <div data-label="div{scroll-body-vertical}" style="width: 200px; height: 400px;">scrollable content</div>
    </div>
    <div data-label="div{scroll-container-vertical-scroll-x}" style="width: 300px; height: 100px; overflow-x: scroll;">
      <div data-label="div{scroll-body-vertical-scroll-x}" style="width: 200px; height: 400px;">scrollable content</div>
    </div>
    <div data-label="div{scroll-container-vertical-scroll-y}" style="width: 300px; height: 100px; overflow-y: scroll;">
      <div data-label="div{scroll-body-vertical-scroll-y}" style="width: 200px; height: 400px;">scrollable content</div>
    </div>

    <div data-label="div{scroll-container-overflow-scroll}" style="width: 100px; height: 50px; overflow: scroll;">
      <div data-label="div{scroll-body-overflow-scroll}" style="width: 500px; height: 40px;">scrollable content</div>
    </div>
    <div data-label="div{scroll-container-overflow-hidden}" style="width: 100px; height: 50px; overflow: hidden;">
      <div data-label="div{scroll-body-overflow-hidden}" style="width: 500px; height: 40px;">scrollable content</div>
    </div>
    <div data-label="div{scroll-container-overflow-visible}" style="width: 100px; height: 50px; overflow: visible;">
      <div data-label="div{scroll-body-overflow-visible}" style="width: 500px; height: 40px;">scrollable content</div>
    </div>

    <div data-label="div{container-overflow-scroll}" style="width: 100px; height: 50px; overflow: scroll;">
      <div data-label="div{body-overflow-scroll}" style="width: 10px; height: 40px;">non overflowing content</div>
    </div>
    <div data-label="div{container-overflow-auto}" style="width: 100px; height: 50px; overflow: auto;">
      <div data-label="div{body-overflow-auto}" style="width: 10px; height: 40px;">non overflowing content</div>
    </div>

    <span data-label="span{scroll-container-overflow-scroll}" style="display: block; width: 100px; height: 50px; overflow: scroll;">
      <div data-label="span{scroll-body-overflow-scroll}" style="width: 1000px; height: 40px;">overflowing content</div>
    </span>
    <section data-label="section{scroll-container-overflow-scroll}" style="width: 100px; height: 50px; overflow: scroll;">
      <div data-label="section{scroll-body-overflow-scroll}" style="width: 1000px; height: 40px;">overflowing content</div>
    </section>
    <div data-label="div-span{scroll-container-overflow-scroll}" style="width: 100px; height: 50px; overflow: scroll;">
      <span data-label="div-span{scroll-body-overflow-scroll}" style="display: block; width: 1000px; height: 40px;">overflowing content</span>
    </div>
    <div data-label="div-section{scroll-container-overflow-scroll}" style="width: 100px; height: 50px; overflow: scroll;">
      <section data-label="div-section{scroll-body-overflow-scroll}" style="width: 1000px; height: 40px;">overflowing content</div>
    </div>

    <div data-label="div{container-overflow-scroll}[tabindex=-1]" style="width: 100px; height: 50px; overflow: scroll;" tabindex="-1">
      <div data-label="div{body-overflow-scroll}[tabindex=-1]" style="width: 10px; height: 40px;">non overflowing content</div>
    </div>
  </article>

  <article data-label="article{details}">
    <h2 data-label="ignore">Details/Summary</h2>

    <details data-label="details">
      <summary data-label="details summary">Collapsed Details</summary>

      <a href="#void" data-label="details a[href]">link</a>

      <div tabindex="0" data-label="ignore"></div>
      <iframe src="iframe-focusable.html#details%20iframe" name="iframe-9" width="200" height="100" data-label="details iframe"></iframe>

      <div tabindex="0" data-label="ignore"></div>
      <div tabindex="0" data-label="ignore"></div>

      <object type="image/svg+xml" data="../media/test.svg#details%20object[src=svg]" width="200" height="200" data-label="details object[src=svg]"></object>

      <div tabindex="0" data-label="ignore"></div>
      <div tabindex="0" data-label="ignore"></div>
    </details>

    <details data-label="details[tabindex=-1]" tabindex="-1">
      <summary data-label="details[tabindex=-1] summary">Collapsed Details</summary>
      <a href="#void" data-label="details[tabindex=-1] a[href]">link</a>
    </details>

    <details data-label="details:has(summary[tabindex=-1])">
      <summary data-label="details summary[tabindex=-1]" tabindex="-1">Collapsed Details</summary>
      <a href="#void" data-label="details:has(summary[tabindex=-1]) a[href]">link</a>
    </details>

    <details open data-label="details[open]">
      <summary data-label="details[open] summary">Expanded Details</summary>
      <a href="#void" data-label="details[open] a[href]">link</a>
    </details>

  </article>

  <article data-label="article{object}">
    <h2 data-label="ignore">Object</h2>

    <!--
      NOTE: Internet Explorer 11 gets stuck in the browser chrome, when it has to tab through 2 consecutive <object>s,
      that's why we added a couple of ignore-me fillers…

      IE10 gets stuck on <object> elements that have no height
    -->

    <div tabindex="0" data-label="ignore"></div>
    <div tabindex="0" data-label="ignore"></div>

    <p>regular</p>
    <object data="../media/test.swf" type="application/x-shockwave-flash" width="200" height="50" data-label="object[src=swf]" class="hide-from-ie10">
      <param data-label="param" name="movie" value="../media/test.swf">
      <param name="quality" value="high">
    </object>

    <!-- Firefox might get stuck on the previous element -->
    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
    <div tabindex="0" data-label="ignore"></div>

    <p>with tabindex</p>
    <object data="../media/test.swf" type="application/x-shockwave-flash" width="200" height="50" data-label="object[src=swf][tabindex=0]" tabindex="0" class="hide-from-ie10">
      <param name="movie" value="../media/test.swf">
      <param name="quality" value="high">
    </object>

    <!-- Firefox might get stuck on the previous element -->
    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
    <div tabindex="0" data-label="ignore"></div>

    <p>with negative tabindex</p>
    <object data="../media/test.swf" type="application/x-shockwave-flash" width="200" height="50" data-label="object[src=swf][tabindex=-1]" tabindex="-1" class="hide-from-ie10">
      <param name="movie" value="../media/test.swf">
      <param name="quality" value="high">
    </object>

    <!-- Firefox might get stuck on the previous element -->
    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
    <div tabindex="0" data-label="ignore"></div>

    <p>without height</p>
    <object data="../media/test.swf" type="application/x-shockwave-flash" width="200" height="0" data-label="object[src=swf][height=0]" class="hide-from-ie10">
      <param name="movie" value="../media/test.swf">
      <param name="quality" value="high">
    </object>

    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
    <div tabindex="0" data-label="ignore"></div>

    <p>hidden</p>
    <object data="../media/test.swf" type="application/x-shockwave-flash" width="200" height="50" data-label="object[src=swf]{hidden}" style="visibility:hidden;" class="hide-from-ie10">
      <param name="movie" value="../media/test.swf">
      <param name="quality" value="high">
    </object>

    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
    <div tabindex="0" data-label="ignore"></div>

    <p>display none</p>
    <object data="../media/test.swf" type="application/x-shockwave-flash" width="200" height="50" data-label="object[src=swf]{none}" style="display: none;" class="hide-from-ie10">
      <param name="movie" value="../media/test.swf">
      <param name="quality" value="high">
    </object>

    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
    <div tabindex="0" data-label="ignore"></div>

    <object type="image/svg+xml" data="../media/test.svg#object[src=svg]" width="200" height="50" data-label="object[src=svg]"></object>

    <div tabindex="0" data-label="ignore"></div>
    <div tabindex="0" data-label="ignore"></div>

    <object type="image/svg+xml" data="../media/test.svg#object[src=svg][tabindex=-1]" width="200" height="50" data-label="object[src=svg][tabindex=-1]" tabindex="-1"></object>

    <div tabindex="0" data-label="ignore"></div>
    <div tabindex="0" data-label="ignore"></div>

    <object type="image/svg+xml" data="../media/test.svg#object[src=svg][tabindex=0]" width="200" height="50" data-label="object[src=svg][tabindex=0]" tabindex="0"></object>

    <div tabindex="0" data-label="ignore"></div>
    <div tabindex="0" data-label="ignore"></div>

    <object type="image/svg+xml" data="../media/test.svg#object[src=svg][height=0]" width="200" height="0" data-label="object[src=svg][height=0]"></object>

    <div tabindex="0" data-label="ignore"></div>
    <div tabindex="0" data-label="ignore"></div>

    <object type="image/svg+xml" data="../media/test.svg#object[src=svg]{hidden}" width="200" height="200" style="visibility: hidden;" data-label="object[src=svg]{hidden}"></object>

    <div tabindex="0" data-label="ignore"></div>
    <div tabindex="0" data-label="ignore"></div>

    <object type="image/svg+xml" data="../media/test.svg#object[src=svg]{none}" width="200" height="200" style="display: none;" data-label="object[src=svg]{none}"></object>

    <div tabindex="0" data-label="ignore"></div>
    <div tabindex="0" data-label="ignore"></div>
    <map name="image-maps-3" data-label="ignore">
      <area href="#void" shape="rect" coords="63,19,144,45" data-label="map.object area[href].upper" data-reference="object[usemap]">
      <area shape="rect" coords="63,50,144,60" data-label="map.object area" data-reference="object[usemap]">
      <area href="#void" shape="rect" coords="63,59,144,85" data-label="map.object area[href].lower" data-reference="object[usemap]">
    </map>

    <object usemap="#image-maps-3" data="../media/image-map.png" type="image/png" data-label="object[usemap]"></object>

    <div tabindex="0" data-label="ignore"></div>
    <div tabindex="0" data-label="ignore"></div>
  </article>

  <article data-label="article{svg}">
    <h2 data-label="ignore">SVG</h2>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg">
      <a xlink:href="#void" data-label="svg a[xlink|href]">
        <text x="10" y="20" data-label="svg a[xlink|href] text">a link</text>
      </a>
      <text x="10" y="20" data-label="svg text">just text, no link</text>
      <rect x="20" y="20" width="5" height="5" data-label="svg rect" />
      <rect x="20" y="20" width="5" height="5" onfocus="" data-label="svg rect[onfocus]" />
      <rect x="15" y="15" width="10" height="10" fill="green" focusable="true" data-label="svg rect[focusable=true]" />
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <h3>svg with negative tabindex</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg[tabindex=-1]" tabindex="-1">
      <a xlink:href="#void" data-label="svg[tabindex=-1] a[xlink|href]">
        <text x="10" y="20" data-label="svg[tabindex=-1] a[xlink|href] text">a link</text>
      </a>
      <text x="10" y="20" data-label="svg[tabindex=-1] text">just text, no link</text>
      <rect x="20" y="20" width="5" height="5" data-label="svg[tabindex=-1] rect" />
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <h3>svg with focusable="false"</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg[focusable=false]" focusable="false">
      <a xlink:href="#void" data-label="svg[focusable=false] a[xlink|href]">
        <text x="10" y="20" data-label="svg[focusable=false] a[xlink|href] text">a link</text>
      </a>
      <text x="10" y="20" data-label="svg[focusable=false] text">just text, no link</text>
      <rect x="20" y="20" width="5" height="5" data-label="svg[focusable=false] rect" />
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <h3>svg with contradicting focusable and tabindex</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg[focusable=false][tabindex=-1]" focusable="false" tabindex="-1">
      <text x="10" y="20" data-label="svg[focusable=false][tabindex=-1] text">just text, no link</text>
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg[focusable=true][tabindex=-1]" focusable="true" tabindex="-1">
      <text x="10" y="20" data-label="svg[focusable=true][tabindex=-1] text">just text, no link</text>
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <h3>tiny profile focusable="false"</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg:has(a[tabindex=0])">
      <a xlink:href="#void" data-label="svg a[xlink|href][tabindex=0]" tabindex="0">
        <text x="10" y="20" data-label="svg a[xlink|href][tabindex=0] text">a link</text>
      </a>
      <a xlink:href="#void" data-label="svg a[xlink|href][tabindex=1]" tabindex="1">
        <text x="10" y="20" data-label="svg a[xlink|href][tabindex=1] text">a link</text>
      </a>
      <text x="10" y="20" data-label="svg:has(a[tabindex=0]) text">just text, no link</text>
      <rect x="20" y="20" width="5" height="5" tabindex="0" data-label="svg rect[tabindex=0]" />
      <rect x="20" y="20" width="5" height="5" tabindex="-1" data-label="svg rect[tabindex=-1]" />
      <rect x="20" y="20" width="5" height="5" data-label="svg:has(a[tabindex=0]) rect" />
      <a xlink:href="#void" focusable="false" data-label="svg a[focusable=false]">
        <rect x="10" y="20" width="10" height="10" fill="brown" />
      </a>
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <h3>svg with viewbox</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg{viewbox}" viewBox="0 0 30 30">
      <rect x="20" y="20" width="5" height="5" tabindex="0" data-label="svg rect[tabindex=0]{viewbox}" />
      <rect x="20" y="20" width="5" height="5" tabindex="-1" data-label="svg rect[tabindex=-1]{viewbox}" />
      <rect x="20" y="20" width="10" height="10" fill="brown" focusable="true" data-label="svg rect[focusable=true]{viewbox}" />
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <h3>svg containing negative tabindex</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg:has(a[tabindex=-1])">
      <a xlink:href="#void" data-label="svg a[xlink|href][tabindex=-1]" tabindex="-1">
        <text x="10" y="20" data-label="svg a[xlink|href][tabindex=-1] text">a link</text>
      </a>
      <text x="10" y="20" data-label="svg:has(a[tabindex=-1]) text">just text, no link</text>
      <rect x="20" y="20" width="5" height="5" data-label="svg:has(a[tabindex=-1]) rect" />
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <h3>tiny profile</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" viewBox="0 0 30 30" data-label="svg{tiny}">
      <rect x="5" y="5" width="10" height="10" fill="red" data-label="svg{tiny} rect" />
      <rect x="10" y="10" width="10" height="10" fill="blue" tabindex="0" data-label="svg{tiny} rect[tabindex=0]" />
      <rect x="15" y="15" width="10" height="10" fill="green" focusable="true" data-label="svg{tiny} rect[focusable=true]" />
      <a xlink:href="#void" focusable="false" data-label="svg{tiny} a[focusable=false]">
        <rect x="10" y="20" width="10" height="10" fill="brown" />
      </a>
      <a xlink:href="#void" tabindex="-1" data-label="svg{tiny} a[tabindex=-1]">
        <rect x="20" y="10" width="10" height="10" fill="magenta" />
      </a>
      <rect x="20" y="20" width="10" height="10" fill="yellow" focusable="true" tabindex="0" data-label="svg{tiny} rect[focusable=true][tabindex=0]" />
      <rect x="20" y="20" width="10" height="10" fill="yellow" focusable="true" tabindex="-1" data-label="svg{tiny} rect[focusable=true][tabindex=-1]" />
      <rect x="20" y="20" width="10" height="10" fill="yellow" focusable="false" tabindex="0" data-label="svg{tiny} rect[focusable=false][tabindex=0]" />
      <rect x="20" y="20" width="10" height="10" fill="yellow" focusable="false" tabindex="-1" data-label="svg{tiny} rect[focusable=false][tabindex=-1]" />
    </svg>

    <div tabindex="0" data-label="ignore"></div>

    <h3>tiny profile focusable="false"</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" viewBox="0 0 30 30" data-label="svg{tiny}[focusable=false]" focusable="false">
      <a xlink:href="#void" data-label="svg{tiny}[focusable=false] a">
        <rect x="10" y="20" width="10" height="10" fill="brown" />
      </a>
    </svg>

    <input data-label="ignore" class="manual-continuation" value="click here if stuck">

    <h3>visibility hidden SVG</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg{hidden}" style="visibility: hidden;">
      <a xlink:href="#void" data-label="svg{hidden} a[xlink|href]">
        <text x="10" y="20" data-label="svg{hidden} a[xlink|href] text">a link</text>
      </a>
      <text x="10" y="20" data-label="svg{hidden} text">just text, no link</text>
      <rect x="20" y="20" width="5" height="5" data-label="svg{hidden} rect" />
      <rect x="20" y="20" width="5" height="5" onfocus="" data-label="svg{hidden} rect[onfocus]" />
      <rect x="15" y="15" width="10" height="10" fill="green" focusable="true" data-label="svg{hidden} rect[focusable=true]" />
    </svg>

    <!-- Chrome might get stuck on the previous element -->
    <input data-label="ignore" class="manual-continuation" value="click here if stuck">

    <h3>display none SVG</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-label="svg{none}" style="display: none;">
      <a xlink:href="#void" data-label="svg{none} a[xlink|href]">
        <text x="10" y="20" data-label="svg{none} a[xlink|href] text">a link</text>
      </a>
      <text x="10" y="20" data-label="svg{none} text">just text, no link</text>
      <rect x="20" y="20" width="5" height="5" data-label="svg{none} rect" />
      <rect x="20" y="20" width="5" height="5" onfocus="" data-label="svg{none} rect[onfocus]" />
      <rect x="15" y="15" width="10" height="10" fill="green" focusable="true" data-label="svg{none} rect[focusable=true]" />
    </svg>

    <!-- Chrome might get stuck on the previous element -->
    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
  </article>

  <article data-label="article{svg-foreignObject}">
    <h2 data-label="ignore">SVG foreignObject</h2>

    <!--
      https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
    -->
    <h3>svg with foreignObject content</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="400" data-label="ignore">
      <!--
        deliberately ignoring these attributes as their support is questionable at best
          requiredExtensions="http://www.w3.org/1999/xhtml"
          requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML"

          requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
          requiredFeatures="http://example.com/TR/SVG11/feature#Extensibility"

        more details
          https://www.w3.org/TR/SVG/struct.html#RequiredExtensionsAttribute
          http://stackoverflow.com/a/12977351/515124

        reason for ignoring
          https://twitter.com/AmeliasBrain/status/789870470329995264
          https://twitter.com/AmeliasBrain/status/789884019487961088
          https://twitter.com/AmeliasBrain/status/789884252779405312
          https://twitter.com/AmeliasBrain/status/789884519906148352
      -->
      <foreignObject width="300" height="200" data-label="svg foreignObject">
        <body xmlns="http://www.w3.org/1999/xhtml" data-label="svg foreignObject body">
          <input type="text" data-label="svg foreignObject body input" />
          <input type="text" data-label="svg foreignObject body input[tabindex=-1]" tabindex="-1" />
          <input type="text" data-label="svg foreignObject body input[tabindex=0]" tabindex="0" />
          <input type="text" data-label="svg foreignObject body input[tabindex=1]" tabindex="1" />
          <p data-label="svg foreignObject body p">Here is a paragraph that requires word wrap</p>
        </body>
      </foreignObject>

      <foreignObject width="300" height="200" y="200" data-label="svg foreignObject[tabindex=-1]" tabindex="-1">
        <body xmlns="http://www.w3.org/1999/xhtml" data-label="svg foreignObject[tabindex=-1] body">
          <input type="text" data-label="svg foreignObject[tabindex=-1] body input" />
          <input type="text" data-label="svg foreignObject[tabindex=-1] body input[tabindex=-1]" tabindex="-1" />
          <input type="text" data-label="svg foreignObject[tabindex=-1] body input[tabindex=0]" tabindex="0" />
          <input type="text" data-label="svg foreignObject[tabindex=-1] body input[tabindex=1]" tabindex="1" />
          <p data-label="svg foreignObject[tabindex=-1] body p">Here is a paragraph that requires word wrap</p>
        </body>
      </foreignObject>
    </svg>

    <input data-label="ignore" class="manual-continuation" value="click here if stuck">

    <h3>svg with switch content</h3>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200" data-label="ignore">
      <!--
        The 'switch' element will process the first child element
        whose testing attributes evaluate to true.
      -->
      <switch data-label="svg switch">
        <!--
          Process the embedded XHTML if the requiredExtensions attribute evaluates to true
          (i.e., the user agent supports XHTML embedded within SVG).
        -->
        <foreignObject width="300" height="200" data-label="svg switch foreignObject">
          <body xmlns="http://www.w3.org/1999/xhtml" data-label="svg switch foreignObject body">
            <input type="text" data-label="svg switch foreignObject body input" />
            <input type="text" data-label="svg switch foreignObject body input[tabindex=-1]" tabindex="-1" />
            <input type="text" data-label="svg switch foreignObject body input[tabindex=0]" tabindex="0" />
            <input type="text" data-label="svg switch foreignObject body input[tabindex=1]" tabindex="1" />
            <p data-label="svg switch foreignObject body p">Here is a paragraph that requires word wrap</p>
          </body>
        </foreignObject>

        <!--
          Else, process the following alternate SVG.
          Note that there are no testing attributes on the 'text' element.
          If no testing attributes are provided, it is as if there were
          testing attributes and they evaluated to true.
        -->
        <text font-size="10" font-family="Verdana">
          <tspan x="10" y="10">Here is a paragraph that</tspan>
          <tspan x="10" y="20">requires word wrap.</tspan>
        </text>
      </switch>
    </svg>

    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
  </article>

  <article data-label="article{svg-use}">
    <h2 data-label="ignore">SVG use</h2>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 200" width="400" data-label="svg{use}">
      <defs data-label="svg{use} defs">
        <g id="shape-with-focus" onfocus="" data-label="svg{use} defs g[onfocus]">
            <rect x="50" y="0" width="50" height="50" data-label="svg{use} defs g[onfocus] rect" />
            <circle cx="100" cy="0" r="50" data-label="svg{use} defs g[onfocus] circle"/>
        </g>
        <g id="shape-with-focus-content" data-label="svg{use} defs g{focusable}">
            <rect x="50" y="50" width="20" height="20" data-label="svg{use} defs g{focusable} rect" />
            <circle cx="50" cy="20" r="20" onfocus="" data-label="svg{use} defs g{focusable} circle[onfocus]" />
            <a xlink:href="#void" data-label="svg{use} defs g{focusable} link"><text>link</text></a>
        </g>
        <g id="shape" data-label="svg{use} defs g">
            <rect x="50" y="50" width="50" height="50" data-label="svg{use} defs g rect" />
            <circle cx="50" cy="50" r="50" data-label="svg{use} defs g circle" />
        </g>
      </defs>

      <a xlink:href="#ignore" data-label="ignore"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#shape-with-focus" x="-50" y="100" fill="green" data-label="svg{use} use{shape-with-focus:1}" />

      <a xlink:href="#ignore" data-label="svg{use} link{1}"><text>t</text></a>

      <use class="hide-from-safari8" xlink:href="#shape-with-focus" x="50" y="100" fill="blue" data-label="svg{use} use{shape-with-focus:2}" />

      <a xlink:href="#ignore" data-label="svg{use} link{2}"><text>t</text></a>
      <g id="inline-shape" data-label="svg{use} g">
        <rect x="0" y="0" width="50" height="50" fill="red" onfocus="" data-label="svg{use} g rect[onfocus]" />
        <a xlink:href="#void" data-label="svg{use} g link"><text>link</text></a>
      </g>

      <a xlink:href="#ignore" data-label="svg{use} link{3}"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#shape-with-focus-content" x="300" y="50" fill="yellow" data-label="svg{use} use{shape-with-focus-content:1}" />

      <a xlink:href="#ignore" data-label="svg{use} link{4}"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#shape-with-focus-content" x="350" y="50" fill="brown" data-label="svg{use} use{shape-with-focus-content:2}" />

      <a xlink:href="#ignore" data-label="svg{use} link{5}"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#shape" x="200" y="50" fill="cyan" data-label="svg{use} use{shape}" />

      <a xlink:href="#ignore" data-label="svg{use} link{6}"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#inline-shape" x="200" y="0" fill="grey" data-label="svg{use} use{inline-shape}" />

      <a xlink:href="#ignore" data-label="svg{use} link{7}"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#shape-with-focus-content" x="300" y="50" fill="yellow" data-label="svg{use} use{shape-with-focus-content:1}[tabindex=-1]" tabindex="-1" />

      <a xlink:href="#ignore" data-label="svg{use} link{8}"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#shape-with-focus-content" x="350" y="50" fill="brown" data-label="svg{use} use{shape-with-focus-content:2}[tabindex=-1]" tabindex="-1" />

      <a xlink:href="#ignore" data-label="svg{use} link{9}"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#inline-shape" x="200" y="0" fill="grey" data-label="svg{use} use{inline-shape}[tabindex=-1]" tabindex="-1" />
    </svg>

    <input data-label="ignore" class="manual-continuation" value="click here if stuck">

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 200" width="400" data-label="svg{use:foreign}">
      <use class="hide-from-safari8" xlink:href="#inline-shape" x="200" y="0" fill="grey" data-label="svg{use:foreign} use" />
      <a xlink:href="#ignore" data-label="svg{use} link{10}"><text>t</text></a>
      <use class="hide-from-safari8" xlink:href="#inline-shape" x="200" y="0" fill="grey" data-label="svg{use:foreign} use[tabindex=-1]" tabindex="-1" />
    </svg>

    <input data-label="ignore" class="manual-continuation" value="click here if stuck">
  </article>

  <!-- https://www.w3.org/TR/html5/editing.html#editing-host -->
  <article data-label="article{contenteditable}">
    <h2 data-label="ignore">Editing Hosts</h2>

    <div contenteditable data-label="[contenteditable]:empty"></div>
    <div contenteditable data-label="[contenteditable]">foo</div>
    <div contenteditable tabindex="-1" data-label="[contenteditable][tabindex=-1]">foo</div>
  </article>

  <article data-label="article{tabindex}">
    <h2 data-label="ignore">Tabindex</h2>

    <div tabindex="-2" data-label="[tabindex=-2]">tabindex <code>-2</code></div>
    <div tabindex="-1" data-label="[tabindex=-1]">tabindex <code>-1</code></div>
    <div tabindex="0" data-label="[tabindex=0]">tabindex <code>0</code></div>
    <div tabindex="1" data-label="[tabindex=1]">tabindex <code>1</code></div>
    <div tabindex="+2" data-label="[tabindex=+2]">tabindex <code>+2</code></div>
    <div tabindex=" +2" data-label="[tabindex= +2]">tabindex <code> +2</code></div>


    <h3 data-label="h3" id="invalid-tabindex">Invalid Tabindex</h3>
    <input tabindex="hello" data-label="input[tabindex=hello]">
    <div tabindex="" data-label="[tabindex=]">empty tabindex</div>
    <div tabindex="hello" data-label="[tabindex=hello]">tabindex <code>hello</code></div>
    <div tabindex="3 " data-label="[tabindex=3 ]">tabindex <code>3 </code></div>
    <div tabindex="3x" data-label="[tabindex=3x]">tabindex <code>3x</code></div>

    <div tabindex="0" data-label="div[tabindex=0]:empty"></div>
    <div tabindex="-1" data-label="div[tabindex=-1]:empty"></div>

    <span tabindex="0" data-label="span[tabindex=0]:empty"></span>
    <span tabindex="-1" data-label="span[tabindex=-1]:empty"></span>
  </article>

  <article data-label="article{menu}">
    <h2 data-label="ignore">Menu and Menuitems</h2>

    <p>No browser hast implemented <code>&lt;menu type=&quot;toolbar&quot;&gt;</code> yet, so testing this now won't make a difference.</p>
  </article>

  <!-- https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute -->
  <article data-label="article{hidden}">
    <h2 data-label="ignore">hidden attribute</h2>

    <div hidden data-label="[hidden]">
      <input type="text" data-label="[hidden] input">
    </div>

    <div hidden data-label="[hidden][tabindex=-1]" tabindex="-1">
      <input type="text" data-label="[hidden][tabindex=-1] input">
    </div>

    <div hidden data-label="[hidden][tabindex=0]" tabindex="0">
      <input type="text" data-label="[hidden][tabindex=0] input">
    </div>

    <div hidden data-label="[hidden]{displayed}" style="display: block !important;">
      <input type="text" data-label="[hidden]{displayed} input">
    </div>
  </article>

  <article data-label="article{visibility}">
    <h2 data-label="ignore">CSS <code>visibility</code></h2>

    <div style="visibility:hidden">
      <a href="#void" data-label="{hidden} > a">link</a>
      <a href="#void" style="visibility:visible" data-label="{hidden} > a{visible}">link</a>
      <div style="visibility:visible">
        <a href="#void" style="visibility:visible" data-label="{hidden} > {visible} > a">link</a>
      </div>
    </div>
    <a href="#void" style="visibility:hidden" data-label="a{hidden}">link</a>

    <table data-label="table">
      <thead data-label="table thead">
        <tr data-label="table thead tr">
          <th data-label="table thead tr th">cell</th>
          <td data-label="table thead tr td">cell</td>
        </tr>
      </thead>
      <tfoot data-label="table tfoot">
        <tr data-label="table tfoot tr">
          <th data-label="table tfoot tr th">cell</th>
          <td data-label="table tfoot tr td">cell</td>
        </tr>
      </tfoot>
      <tbody data-label="table tbody">
        <tr data-label="table tbody tr">
          <th data-label="table tbody tr th">cell</th>
          <td data-label="table tbody tr td">
            <a href="#void" data-label="table tbody tr td a">link</a>
          </td>
        </tr>
        <tr style="visibility:collapse" data-label="table tbody tr{collapse}">
          <td data-label="table tbody tr{collapse} td">
            <a href="#void" data-label="table tbody tr{collapse} td a">link</a>
            <!-- Note: Firefox 33 does not show the link, but it's tabbable! -->
            <a href="#void" style="visibility: visible" data-label="table tbody tr{collapse} td a{visible}">link</a>
          </td>
          <td style="visibility: visible" data-label="table tbody tr{collapse} td{visible}">
            <!-- Note: Firefox 33 does not show the link, but it's tabbable! -->
            <a href="#void" data-label="table tbody tr{collapse} td{visible} a">link</a>
          </td>
        </tr>
      </tbody>
    </table>
  </article>

  <article data-label="article{display}">
    <h2 data-label="ignore">CSS <code>display</code></h2>

    <div style="display:none">
      <a href="#void" data-label="{none} > a">link</a>
      <a href="#void" style="display:inline" data-label="{none} > a{inline}">link</a>
    </div>
    <a href="#void" style="display:none" data-label="a{none}">link</a>

    <div style="width:0; height:0" tabindex="0" data-label="div{no-dimension}"></div>
  </article>

  <article data-label="article{flexbox}">
    <h2 data-label="ignore">CSS <code>flexbox</code></h2>

    <a href="#void" data-label="a{flexbox}" class="flexbox">
      <span data-label="a{flexbox} > span">link</span>
    </a>

    <div tabindex="-1" data-label="[tabindex=-1]{flexbox}" class="flexbox">
      <span data-label="[tabindex=-1]{flexbox} > span">inert</span>
      <span data-label="[tabindex=-1]{flexbox} > span[tabindex=-1]" tabindex="-1">focusable</span>
      <span data-label="[tabindex=-1]{flexbox} > span[tabindex=0]" tabindex="0">tabbable</span>
    </div>

    <span data-label="span{flexbox}" class="flexbox">
      <span data-label="span{flexbox} > span">inert</span>
      <span data-label="span{flexbox} > span[tabindex=-1]" tabindex="-1">focusable</span>
      <span data-label="span{flexbox} > span[tabindex=0]" tabindex="0">tabbable</span>
    </span>

    <div data-label="div{flexbox}" class="flexbox">
      <span style="-webkit-order: 2; -ms-flex-order: 2; order: 2;" data-label="div{flexbox} > span{order:2}">
        <input data-label="div{flexbox} > span{order:2} > input">
      </span>
      <span style="-webkit-order: 1; -ms-flex-order: 1; order: 1;" data-label="div{flexbox} > span{order:1}">
        <input data-label="div{flexbox} > span{order:1} > input">
      </span>
    </div>

    <span data-label="span{flexbox}:empty" class="flexbox"></span>
  </article>

  <article data-label="article{user-modify}">
    <h2 data-label="ignore">CSS <code>user-modify</code></h2>

    <span data-label="span{user-modify}" class="user-modify">
      hello world
    </span>
    <span data-label="span{user-modify}[tabindex=-1]" class="user-modify" tabindex="-1">
      hello world
    </span>
  </article>

  <article data-label="article{canvas}">
    <h2 data-label="ignore">children of <code>canvas</code> element</h2>

    <canvas width="150" height="150" data-label="canvas">
      <input type="text" data-label="canvas > input">
      <input type="text" data-label="canvas > input[tabindex=-1]" tabindex="-1">
      <a href="#void" data-label="canvas > a">hello</a>
      <a href="#void" data-label="canvas > a[tabindex=-1]" tabindex="-1">hello</a>
      <span tabindex="0" data-label="canvas > [tabindex=0]">hello</span>
      <span tabindex="-1" data-label="canvas > [tabindex=-1]">hello</span>
    </canvas>

  </article>

  <hr>
  <a id="tabsequence-end" href="#top" data-label="ignore">go to top</a>
  <h2 id="output-results" data-label="ignore">Results</h2>

  <script data-label="script">
    (function(){
      var map = {};
      [].forEach.call(document.querySelectorAll('data-label'), function(element) {
        var label = element.getAttribute('data-label');
        if (map[label]) {
          window.console && console.warn('duplicate label', label);
        }

        map[label] = true;
      });
    })();

    // make sure we're not running with some outdated config
    localStorage.clear();
  </script>
  <script src="../../node_modules/requirejs/require.js" data-label="ignore" data-main="focusable"></script>
</body>
</html>
